<template>

  <section class="index-search">
    <div class="search" ref="header">
      <router-link to="/Classification">
        <div class="search_left"></div>
      </router-link>
      <div class="search_center">
        <router-link to="/Search">
          <div class="inpus">输入喜欢的宝贝名称</div>
        </router-link>
      </div>
      <div class="search_right">
        <span v-show="isLogin">图标</span>
        <router-link to="/Login" v-show="!isLogin">登录</router-link>
      </div>
    </div>
  </section>

</template>

<script>
	export default {
		data(){
			return{
				top:""
      }
    },
    computed: {
      isLogin(){
          return sessionStorage.getItem('userInfo') ? true : false;
      }
    },
		methods:{
			handleScroll () {
        this.box = this.$refs.header 
        
        if(this.box){
            this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            if(this.scrollTop == 0){
              this.box.style.background="-webkit-linear-gradient(rgba(1, 1, 1, 0.2) 0%, rgba(255, 255, 255, 0) 100%)"
            }else{
              
              this.box.style.background="-webkit-linear-gradient(top,rgba(255,0,0,1),rgba(255,255,255,0))"
      
          }
        }
        
			}
		},
		mounted(){  
      
      window.addEventListener("scroll",this.handleScroll,true)
    }
	}
</script>


<style scoped>
  .search{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0.66rem;
    background: transparent;
    display: flex;
    flex-direction: row;
    line-height: 0.66rem;
    z-index: 99999;
  }
  .search_left{
    width: 1.05rem;
    height: 0.66rem;
    background: url('../assets/main_img/Classification_icon.png') no-repeat center center;
    background-size: 0.46rem 0.38rem;
  }
  .search_center{
    flex: 1;
  }
  .search_center .inpus{
    height: 0.52rem;
    line-height: 0.52rem;
    margin-top: 0.07rem;
    width: 4.18rem;
    padding-left: 0.67rem;
    border-radius: 0.1rem;
    color: #fff;
    background: url("../assets/main_img/search_icon.png") rgba(255,255,255,0.6) no-repeat 0.12rem center;
    background-size: 0.44rem;
    font-size: 0.26rem;
  }
  .search_right{
    color: #fff;
    width: 1.57rem;
    text-align: center;
    font-size: 0.28rem;
  }
  .search_right a{
    color: #fff;
  }
</style>
